<template>
  <div class="boxfd">
    <!-- 按钮 -->
    <div class="meun">
      <div class="meunItems" @click="goqirui">骑行数据</div>
    </div>
    <div class="title">骑程瑞途大数据云平台</div>
    <div class="viewportabc1250">
      <div class="column">
        <!--成交趋势-->
        <div class="monitor panel">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" data-index="0" class="active">月度成交量</a>
            </div>
            <div class="content" style="display: block;">
              <div class="content_top">
                <qushi ref="qushi" />
              </div>
            </div>
          </div>
        </div>
        <!--年龄段占比-->
        <div class="point panel" style="height: 23rem;">
          <div class="inner">
            <h3>年龄段占比</h3>
            <div class="qiyeleixing1">
              <div class="chart">
                <!-- 年龄段占比 -->
                <div class="qi_lei">
                  <!-- 年龄段占比 -->
                  <age ref="qiYeLeiXing" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--车销排行-->
        <div class="point panel" style="height: 22rem;">
          <div class="inner">
            <h3>月度分期品牌排行</h3>
            <div class="qiyeleixing1">
              <div class="chart">
                <div class="qi_pai">
                  <!-- 车销排行 -->
                  <carType ref="paihangjindutiao" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 地图 -->
        <div class="map">
          <h3>
            <!-- 设备数据统计 -->
          </h3>

          <div class="chart">
            <div class="tiaol">
              <!-- <div class="tiaol_items" v-for=" (items,index) in sheBeiType" :key="index">
                                <div class="tiaol_items_title">
                                    <CountTo :startVal='startVal' :endVal='parseInt(items.unm)' :duration='duration' />
                                </div>
                                <div class="tiaol_items_content">
                                    <i class="el-icon-s-promotion" :style="{color: `${items.color}`}"></i>
                                    <span>{{ items.name }}</span>
                                </div>

              </div>-->

              <div class="tiaol_items">
                <div class="tiaol_items_title">
                  <CountTo :startVal="startVal" :endVal="rzye" :duration="duration" />
                </div>
                <div class="tiaol_items_content">
                  <i class="el-icon-s-promotion" :style="{ color: `#7011d9` }"></i>
                  <span>融资余额</span>
                </div>
              </div>

              <div class="tiaol_items">
                <div class="tiaol_items_title">
                  <CountTo :startVal="startVal" :endVal="jrfk" :duration="duration" />
                </div>
                <div class="tiaol_items_content">
                  <i class="el-icon-s-promotion" :style="{ color: `#6da623` }"></i>
                  <span>今日放款</span>
                </div>
              </div>

              <div class="tiaol_items">
                <div class="tiaol_items_title">
                  <CountTo :startVal="startVal" :endVal="jrhk" :duration="duration" />
                </div>
                <div class="tiaol_items_content">
                  <i class="el-icon-s-promotion" :style="{ color: `2a1fce` }"></i>
                  <span>今日回款</span>
                </div>
              </div>

              <div class="tiaol_items">
                <div class="tiaol_items_title">
                  <CountTo :startVal="startVal" :endVal="jrhkd" :duration="duration" />
                </div>
                <div class="tiaol_items_content">
                  <i class="el-icon-s-promotion" :style="{ color: `#ed3f35` }"></i>
                  <span>今日放款单</span>
                </div>
              </div>
            </div>

            <!-- 地图组件 -->
            <tai-cang-map />
          </div>
        </div>
        <!-- 月度区域成交排行排行 -->
        <div class="users panel">
          <div class="inner">
            <h3>行业排行</h3>
            <div class="zaixianlvsss">
              <div class="zaixianlvsss_head">
                <div class="zaixianlvsss_head_itens">分类</div>
                <div class="zaixianlvsss_head_itens">数量</div>
                <div class="zaixianlvsss_head_itens">占比</div>
                <div class="zaixianlvsss_head_itens">分类</div>
                <div class="zaixianlvsss_head_itens">数量</div>
                <div class="zaixianlvsss_head_itens">占比</div>
              </div>
              <div class="zaixianlvsss_body">
                <vue-seamless-scroll :data="areaData" class="warp" :class-option="defaultOption">
                  <div
                    class="zaixianlvsss_body_items"
                    v-for="(items, index) in areaData"
                    :key="index"
                  >
                    <span>{{ items.type }}</span>
                    <span>{{ items.num }}</span>
                    <span>{{ items.bi }}</span>
                    <span>{{ items.type2 }}</span>
                    <span>{{ items.num2 }}</span>
                    <span>{{ items.bi2 }}</span>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 订单实时流转 -->
        <div class="monitor panel">
          <div class="inner">
            <div class="tabs">
              <!-- <a href="javascript:;" data-index="0" class="active">成交趋势</a> -->
              <a href="javascript:;" data-index="0" class="active">月度成交展示</a>
            </div>
            <div class="content" style="display: block;">
              <div class="content_top">
                <lvcheng ref="lvcheng" />
              </div>
            </div>
          </div>
        </div>
        <!-- 融资回款趋势 -->
        <div class="sales panel" style="height:20rem;">
          <div class="inner">
            <div class="caption">
              <h3>资金数据</h3>
              <financing></financing>
            </div>
          </div>
        </div>
        <!--成交TOP3榜首-->
        <div class="monitor panel" style="height: 15rem;">
          <div class="inner">
            <div class="tabs">
              <!-- <a href="javascript:;" data-index="0" class="active">成交TOP3榜首</a> -->
              <a href="javascript:;" data-index="0" class="active">分期成交TOP5</a>
            </div>
            <div class="content" style="display: block;">
              <div class="content_top">
                <second ref="qiYeFenBu" />
              </div>
            </div>
          </div>
        </div>
        <!-- 客户概览 -->
        <div class="top panel" style="height: 9.5rem;">
          <div class="inner">
            <div class="all" style="width: 100%;">
              <h3>客户概览</h3>
              <div class="genter" style="margin-top: 1px;">
                <div class="genter_items">
                  <div>
                    <i class="el-icon-male" style="color: cadetblue;"></i>
                  </div>
                  <div>
                    <span>{{ getTotalGenderData.totalMale }}</span>
                    <span style="color: #ccc;font-size: 0.9rem;margin-left: 3px;">人</span>
                  </div>
                  <div style="color: cadetblue;">{{ getTotalGenderData.malePercent }}</div>
                </div>
                <div class="genter_items">
                  <div>
                    <i class="el-icon-female" style="color: pink;"></i>
                  </div>
                  <div>
                    <span>{{ getTotalGenderData.totalFemale }}</span>
                    <span style="color: #ccc;font-size: 0.9rem;margin-left: 3px;">人</span>
                  </div>
                  <div style="color: pink;">{{ getTotalGenderData.femalePercent }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 年龄占比
import age from "../chartBox/age";
// 车型占比
import carType from "../chartBox/carType";
// 成交趋势
import qushi from "../chartBox/qushi";
// 地图组件
import taiCangMap from "../chartBox/taiCangMap";
// 融资回款趋势
import financing from "../chartBox/financing.vue";
// 排行
import second from "../chartBox/second";
// 流程
import lvcheng from "../chartBox/liCheng.vue";
import CountTo from "vue-count-to";
import vueSeamlessScroll from "vue-seamless-scroll";
import { commonMixin } from "@/mixins/commonMixin.js";
import axios from "axios";
export default {
  components: {
    age,
    carType,
    qushi,
    financing,
    second,
    lvcheng,
    taiCangMap,
    CountTo, //数字滚动组件
    vueSeamlessScroll
  },
  mixins: [commonMixin],

  data() {
    return {
      boy: 0, //概览男生，
      girl: 0, //概览女生
      areaData: [
        {
          type: "建筑/机械/重工/建材",
          num: 38499,
          bi: "7.0%",
          maleNum: Math.round(38499 * 0.75),
          femaleNum: Math.round(38499 * 0.25),
          type2: "医院/各类专科医院",
          num2: 66000,
          bi2: "12.0%",
          maleNum2: Math.round(66000 * 0.75),
          femaleNum2: Math.round(66000 * 0.25)
        },
        {
          type: "科技/电子/数码信息",
          num: 66000,
          bi: "12.0%",
          maleNum: Math.round(66000 * 0.75),
          femaleNum: Math.round(66000 * 0.25),
          type2: "房产行业",
          num2: 16500,
          bi2: "3.0%",
          maleNum2: Math.round(16500 * 0.75),
          femaleNum2: Math.round(16500 * 0.25)
        },
        {
          type: "餐饮行业",
          num: 21999,
          bi: "4.0%",
          maleNum: Math.round(21999 * 0.75),
          femaleNum: Math.round(21999 * 0.25),
          type2: "教育行业",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "公务员",
          num: 55000,
          bi: "10.0%",
          maleNum: Math.round(55000 * 0.75),
          femaleNum: Math.round(55000 * 0.25),
          type2: "文化/传媒/娱乐/演绎",
          num2: 43999,
          bi2: "8.0%",
          maleNum2: Math.round(43999 * 0.75),
          femaleNum2: Math.round(43999 * 0.25)
        },
        {
          type: "物流/配送/旅游",
          num: 21999,
          bi: "4.0%",
          maleNum: Math.round(21999 * 0.75),
          femaleNum: Math.round(21999 * 0.25),
          type2: "装饰/装修",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "地铁/铁路/公交/机场",
          num: 55000,
          bi: "10.0%",
          maleNum: Math.round(55000 * 0.75),
          femaleNum: Math.round(55000 * 0.25),
          type2: "美容/美发/纹身",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "汽车/机车行业",
          num: 49499,
          bi: "9.0%",
          maleNum: Math.round(49499 * 0.75),
          femaleNum: Math.round(49499 * 0.25),
          type2: "金融行业",
          num2: 5499,
          bi2: "1.0%",
          maleNum2: Math.round(5499 * 0.75),
          femaleNum2: Math.round(5499 * 0.25)
        },
        {
          type: "商贸/贸易行业",
          num: 32999,
          bi: "6.0%",
          maleNum: Math.round(32999 * 0.75),
          femaleNum: Math.round(32999 * 0.25),
          type2: "个体户",
          num2: 43999,
          bi2: "8.0%",
          maleNum2: Math.round(43999 * 0.75),
          femaleNum2: Math.round(43999 * 0.25)
        }
      ],
      geSheBelZaiXianFuQiuData: [
        { value: 221, title: "审请", color: "#008484" },
        { value: 221, title: "通过", color: "#008484" },
        { value: 221, title: "拒绝", color: "#008484" },
        { value: 221, title: "考虑中", color: "#008484" }
      ], //各区设备统计数据
      rzye: 6183, //融资余额
      jrfk: 230, //今日放款
      jrhk: 163, //今日回款
      jrhkd: 132, //今日放款单
      startVal: 0, //初始化数字滚动的值
      duration: 3000, //数字滚动所花费的时间
      // 客户概览数据源
      getTotalGenderData: {}
    };
  },
  created() {},
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.areaData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted() {
    let result = this.getTotalGenderStats(this.areaData);
    if (result) {
      this.getTotalGenderData = result
    }
    this.gailan();
    this.$refs.qushi.initCharts();
    if (this.$refs.qushi.filteredQiYiData.length > 0) {
      // 当月成交总额
      let newYaerData = this.$refs.qushi.filteredQiYiData[
        this.$refs.qushi.filteredQiYiData.length - 1
      ];
      // 申请额度
      let sqe = parseFloat(newYaerData.toFixed(0));
      // 通过
      let tg = parseFloat((newYaerData * 0.86).toFixed(0));
      // 考虑中
      let klz = parseFloat((tg * 0.06).toFixed(0));
      // 拒绝
      let jj = parseFloat((newYaerData * 0.14).toFixed(0));
      this.$refs.lvcheng.geSheBelZaiXianFuQiuData[3].value = sqe;
      this.$refs.lvcheng.geSheBelZaiXianFuQiuData[2].value = tg;
      this.$refs.lvcheng.geSheBelZaiXianFuQiuData[1].value = klz;
      this.$refs.lvcheng.geSheBelZaiXianFuQiuData[0].value = jj;
      this.$refs.lvcheng.initCharts();
      console.log(
        this.$refs.qushi.filteredQiYiData[
          this.$refs.qushi.filteredQiYiData.length - 1
        ],
        "filteredQiYiData覅"
      );
    }
  },
  methods: {
    // 统计男女比例
    getTotalGenderStats(areaData) {
      let totalMale = 0;
      let totalFemale = 0;
      for (let item of areaData) {
        // 累加第一个行业的男女数量
        totalMale += item.maleNum || 0;
        totalFemale += item.femaleNum || 0;

        // 累加第二个行业的男女数量
        totalMale += item.maleNum2 || 0;
        totalFemale += item.femaleNum2 || 0;
      }
      const total = totalMale + totalFemale;

      // 百分比计算
      const malePercent = total
        ? ((totalMale / total) * 100).toFixed(2) + "%"
        : "0%";
      const femalePercent = total
        ? ((totalFemale / total) * 100).toFixed(2) + "%"
        : "0%";

      // 最大公约数函数，用于简化比例
      function gcd(a, b) {
        return b === 0 ? a : gcd(b, a % b);
      }
      const g = gcd(totalMale, totalFemale);
      const ratio = `${Math.floor(totalMale / g)}:${Math.floor(
        totalFemale / g
      )}`;

      return {
        // 总男性人数：所有行业中 maleNum 和 maleNum2 的累加结果
        totalMale,
        // 总女性人数：所有行业中 femaleNum 和 femaleNum2 的累加结果
        totalFemale,
        // 总人数：总男性 + 总女性
        total,
        // 男性占比：(总男性 / 总人数) * 100，保留两位小数，并加上百分号 %
        malePercent,
        // 女性占比：(总女性 / 总人数) * 100，保留两位小数，并加上百分号 %
        femalePercent,
        // 男女比例：通过最大公约数（GCD）简化后的比例，例如 3:1 或 2:3
        ratio
      };
    },
    // 计算客户概览
    gailan() {
      fetch("https://www.hztcyan.com/api/biz/financialdata/getStatisticalData");
      this.$post("auth/b/doLogin", {
        account: "superadmin",
        password:
          "dc826a2ad926ff352bf49dd881bbb9917dbba63bda441785dbf5b9eea4e1dd9816d4409ff8c379acc5a1c6257431fbe7634031970f6ccd4e0ad1b2c3493278259ab4b856d6f64ed0b754ca7f2397dabc1c257a1acd5bdd66067e7f2170f8d86caf241de7457f69429827cda6232846"
      });
      this.$get("biz/financialdata/getStatisticalData").then(res => {
        console.log(res, "dddddddd");
      });
      // 计算 bi 和 bi2 的总和
      let total = 0;
      this.areaData.forEach(item => {
        total += parseFloat(item.num) + parseFloat(item.num2);
      });
      this.boy = total * 0.75;
      this.girl = total * 0.25;
    },
    // 跳转定位大屏
    goqirui() {
      console.log("ddddddddddddd");

      this.$router.push("/positioning");
    }
  }
};
</script>
<style scoped>
@import "../css/index.css";

.vue-count-to {
  width: 100%;
  height: 100%;
}

.count-to {
  width: 300px;
  height: 300px;
  margin: 100px 0 0 100px;
  border: 1px solid red;
}

.count-to span {
  font-size: 30px;
  font-weight: 700;
  font-family: "YJSZ";
}

.count-to > div:nth-of-type(1) > span {
  color: red;
}

.count-to > div:nth-of-type(2) > span {
  color: blue;
}

.count-to > div:nth-of-type(3) > span {
  color: pink;
}

.count-to > div:nth-of-type(4) > span {
  color: yellow;
}

.count-to > div:nth-of-type(5) > span {
  color: green;
}

.count-to > div:nth-of-type(6) > span {
  color: orange;
}

.count-to > div:nth-of-type(7) > span {
  color: cyan;
}

.count-to > div:nth-of-type(8) > span {
  color: purple;
}

.zaixianlvsss {
  width: 100%;
  height: calc(100% - 10%);
  background: #35517836;
  margin-top: 10px;
  border-radius: 10px;
}

.zaixianlvsss_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  font-size: 1rem;
  color: #4c9bfd;
  padding-top: 10px;
}

.zaixianlvsss_head_itens {
  width: 100%;
  display: flex;
  justify-content: center;
}

.zaixianlvsss_body {
  width: 100%;
  height: 160px;
  font-size: 1rem;
  color: #fff;
}

.zaixianlvsss_body_items {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 15px;
}

.zaixianlvsss_body_items span {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: #3771b9;
}

.warp {
  height: 300px;
  /* 设置滚动区域的高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  /* border: 1px solid #ccc; 可选：添加边框 */
}

.genter {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 1.3vw;
  color: #fff;
  margin: 20px 0 0;
}

.genter_items {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.genter_items div:nth-child(2) {
  margin: 6px 0 4px;
}
.meun {
  position: fixed;
  z-index: 9000;
  top: 40px;
  right: 40px;
}
.meunItems {
  width: 95px;
  height: 40px;
  background: radial-gradient(
      155% 81% at 50% 100%,
      rgba(74, 94, 255, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}
.meunItems:active {
  background: radial-gradient(
      155% 81% at 50% 100%,
      rgba(255, 74, 74, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    rgba(255, 255, 255, 0.12);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16),
    0px 1px 2px 0px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
</style>
